<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="display: block;font-size: 20px; margin-bottom: 20px;">编辑文章</span>
            </div>
        </template>
        <div>
            <span>文章信息</span>
            <el-form :data="List" label-width="80px">
                <el-form-item style="margin-top: 10px;" props="title" label="文章标题">
                    <el-input style="width: 722px;" v-model="editText.title" size="large" placeholder="请输入文章标题"></el-input>
                </el-form-item>
                <el-form-item label="列表图片" style="display: flex;justify-content: center;align-items: center;">
                    <el-image :src="`http://127.0.0.1:3000/${List.picture}`"
                        style="width: 9.5vw;height: 21vh;margin-bottom: 10px; border-radius: 15px;" alt="" />
                    <UploadImg @uploadFile="getPictureName"></UploadImg>
                </el-form-item>
                <el-form-item style="margin-top: -25px;">
                    <div class="el-upload__tip">
                        图片尺寸800*800px,可上传多张
                    </div>
                </el-form-item>
                <el-form-item prop="title" label="文章分类">
                    <el-select style="width: 252px;" v-model="editText.selectType" placeholder="请选择" size="large">
                        <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章内容">
                    <WangEditor style="width: 100%;" @update:editorValue="update" ref="editorRef"
                        v-model="form.noticeContent" :editorValue="form.noticeContent"></WangEditor>
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-date-picker style="width:252px" v-model="value2" type="datetime" placeholder="请选择发布时间"
                        :shortcuts="shortcuts" />
                </el-form-item>
                <el-form-item label="排序号">
                    <el-input style="width: 252px;" v-model="editText.num" placeholder="请输入排序号"></el-input>
                    <span class="text">请填写数字，数字越大排序越靠前</span>
                </el-form-item>
                <el-form-item label="文章状态">
                    <el-text>{{ editText.status }}</el-text>
                </el-form-item>
                <el-form-item label="发布人">
                    <el-text>{{ editText.publisher }}</el-text>
                </el-form-item>
                <el-form-item label="收藏量">
                    <el-text>{{ editText.collectNum }}</el-text>
                </el-form-item>
                <el-form-item label="分享量">
                    <el-text>{{ editText.shareNum }}</el-text>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitText">保存</el-button>
                    <el-button type="danger" @click="deleteText">删除</el-button>
                    <el-button @click="cancleReturn">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script lang='ts' setup>
import { reactive, onMounted, ref } from 'vue'
import api from '@/api'
import { saveArticleType } from '@/types/ccc/article'
import UploadImg from '@/views/ccc/uploadImg.vue';
import WangEditor from '@/views/ccc/WangEditor.vue'
import { UploadFile, ElMessage } from 'element-plus'
import format from '@/utils/ccc/format'
import { useRouter } from 'vue-router'
const List = JSON.parse(localStorage.getItem('item'))
const form = ref({
    noticeContent: List.content
})
const update = (value: any) => {
    form.value.noticeContent = value
}
const editText = reactive({
    title: List.title,
    selectType: List.type,
    time: List.updateTime,
    num: List.collectNum,
    status: List.status,
    publisher: List.publisher,
    collectNum: List.collectNum,
    shareNum: List.shareNum,
})
console.log(editText);






// 获取文章分类
let options = reactive<Array<any>>([{
    value: 0,
    label: '请选择'
}])
const getArticle = async () => {
    const result = await api.systemSetting.article.getAllArticleTypes()
    // console.log(result);

    if (result.data.code === 200) {
        // console.log(result.data.data);
        result.data.data.forEach((item: any) => {
            // console.log(item);
            // console.log(options);
            if (item) {
                options.push({
                    'value': item.id,
                    'label': item.name
                })
            }
        });

    }
}
onMounted(() => {
    getArticle()

})


const saveList = reactive<saveArticleType>({
    id: List.id,
    title: '',
    picture: '',
    type: 0,
    publisher: '李明明',
    collectNum: 0,
    publishTime: '',
    content: ''
})
const getPictureName = (file: UploadFile) => {
    console.log(file);
    saveList.picture = `public/upload/${file.name}`
}

const value2 = ref<object>(List.updateTime)
const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
const submitText = async () => {
    console.log(1);
    console.log(editText);
    if (value2.value && form.value.noticeContent && editText.num) {
        saveList.title = editText.title
        saveList.publishTime = format(value2.value)
        saveList.content = form.value.noticeContent
        saveList.collectNum = Number(editText.num)
        saveList.type = editText.selectType
        const result = await api.systemSetting.article.updateArticleByIdApi(saveList)
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg)
        } else {
            ElMessage.warning(result.data.msg)
        }

    }
    console.log(saveList);
    // console.log(form.value.noticeContent);
}
const router = useRouter()
const deleteText = () => {
    editText.title = ''
    editText.selectType = 0
    editText.time = ''
    form.value.noticeContent = ''
    value2.value = ''
    editText.time = ''
    editText.num = ''

}
const cancleReturn = () => {
    router.replace('/home/system/zx')
}

</script>

<style lang='scss' scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 12px;
    color: #989797;
    margin-left: 15px;
}
</style>